<div id="contenedorClasificacion" >
	<div id="textoClasificacion">
		<p   style="font-size: 15px; text-align:left;">
			Selecciona un juego, un tema y un nivel para ver la clasificación.
		</p>
	</div>
	
	<br/>
	<form class="form-horizontal" method="post" id="ver_clasificacion" >
		<fieldset style="text-align:left">
			<div id="juego" class="form-group">
				<label  for="juegos" class="col-xs-3 col-sm-2 control-label">Juego:</label> 
				<div class="col-xs-10 col-sm-5">
					<select id="juegos" name="idAsignatura" class="form-control " required>
						<option value="">-- Juego --</option>
					</select>
				</div>
			</div>
			<div id="asignatura" class="form-group">
				<label  for="asignaturas" class="col-xs-3 col-sm-2 control-label">Tema:</label> 
				<div class="col-xs-10 col-sm-5">
					<select id="asignaturas" name="idAsignatura" class="form-control " required>
						<option value="">-- Tema --</option>
					</select>
				</div>
			</div>
			<div id="nivel" class="form-group">
				<label  for="dificultades" class="col-xs-3 col-sm-2 control-label">Nivel:</label>
				<div class="col-xs-10 col-sm-5">
					<select id="dificultades" name="idDificultad" class="form-control" required>
						<option value="">-- Nivel --</option>
					</select>
				</div>
			</div>
			<input type="submit" id="clasificacion"  value="Ver clasificación" class="btn btn-primary"/>
			
		</fieldset>
	</form>
	
	
	<div class="form-horizontal" >
		<h3>Clasificación</h3>
		<table id="contenedorClasificaciones" class="table table-bordered table-striped table-hover table-responsive">
			<thead>
				<th>Usuario</th>
				<th>Partidas ganadas</th>
			</thead>
		</table>
	</div>
</div>

<script>
$(document).one("ajaxComplete", formulario);

function formulario() {
	
	// Cargar asignatura
	var $asignaturas = $('#asignaturas');
	var urlAsignatura = "../dispatcher/referencias/asignaturas";
	

	$.getJSON(urlAsignatura, function(datos) {
		$.each(datos, function(i, item) {
			$asignaturas.append('<option value="'+ item.id +'">'+ item.nombre + '</option>');
			$asignaturas.append(item.nombre);
		});

	});

	// Cargar dificultades
	var $dificultades = $('#dificultades');
	var urlDificultad = "../dispatcher/referencias/dificultad";

	$.getJSON(urlDificultad,function(data) {
		$.each(data,function(i, item) {
			$dificultades.append('<option value="'+ item.id +'">'+ item.label+ '</option>')
			$dificultades.append(item.label);
		});
	});
	
	//Recuperar la lista de juegos de la base de datos
	var $juegos = $('#juegos');
	var urlJuegos = "../dispatcher/plataforma/agregarJuegos";
	
	$.getJSON(urlJuegos, function(datos) {
		$.each(datos, function(i, item) {
			$juegos.append('<option value="'+ item.id +'">'+ item.nombre+ '</option>')
			$juegos.append(item.nombre);
		});
	});
};

$("form").submit(function(event) {

	event.preventDefault();
	
	$("#contenedorClasificaciones  > tbody > tr").remove();
	var asignatura = $('#asignaturas').val();
	var dificultad = $('#dificultades').val();
	var juego = $('#juegos').val();
	
	var urlClasificacion = "../dispatcher/plataforma/clasificacion";
	urlClasificacion += "?juegoId="+ juego + "&asignaturaId=" + asignatura+ "&dificultadId=" + dificultad;
	$.getJSON(urlClasificacion, function(data) {
		$.each(data, function(i, item){
			 $(contenedorClasificaciones).append('<tr> <td>' + item.nombre + ' </td>' 
					 + '<td>' + item.partidasGanadas + ' </td>'+'</tr>');
		});		
	});
});
</script>